<template>
    <div v-if="show">
        <div class="container">
            <span>请打开智绘黑板<br/>并扫描二维码以进入课堂</span>
            <img src="../assets/扫码/跳转二维码.png">
        </div>
        <img class="exit-button" src="../assets/path.png" @click="popOut()" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useWebsocket } from "@/hooks";
import store from "@/store";
import router from '@/router';

const show = ref(false)
const socket = useWebsocket(handelMessage); //连接socket
const userData = store.state.userData;
const roomData = store.state.roomData;

function popOut() {
    show.value = !show.value
}

function handelMessage(event) {
    const data = JSON.parse(event.data);
    //防止用户重复收到消息
    if (userData.userId == data.userId) {
        return;
    }
    // console.log("socket发送的" + data.type, data);
    switch (data.type) {
        case 'navToClass':
            router.push('/class')
    }
}

defineExpose({
    popOut,
});
</script>

<style scoped>
.container {
    width: 25rem;
    height: 25rem;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 6px gray;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000000000;
}

img {
    width: 12.5rem;
    height: 12.5rem;
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000000001;
}

.exit-button {
    cursor: pointer;
    height: 1.875rem;
    width: 1.875rem;
    position: fixed;
    top: 30%;
    right: 50%;
    transform: translate(400%, -50%);
}

span{
    position: fixed;
    top: 25%;
    right: 50%;
    transform: translate(50%, -50%);
    text-align: center;
}
</style>
